<template>
  <view v-if="shenheStatus == 0" class="salesman">
    <view
      class="codePreview"
      :style="{
        backgroundImage: 'url(' + config.background + ')',
      }"
    >
      <!-- <view class="userBox" :style="{ backgroundColor: qrcode.backgroundColor }">
        <view class="userPic"></view>
        <text class="name">我是某某某</text>
        <text class="tip">代言真的有钱赚！</text>
        <view class="codePic">
          <view class="tips">
            <text>扫描二维码</text>
            <text>和我一起赚钱</text>
          </view>
          <view class="pic">
            <text></text>
          </view>
        </view>
      </view> -->
      <view class="userBox" v-if="config.data && config.data != ''">
        <image :src="config.data" @click="previewImage"></image>
      </view>
      <!-- <view class="box">
        <canvas
          class="canvas"
          style="width: 642rpx; height: 698rpx;margin:0 auto;"
          canvas-id="userCanvas"
          id="userCanvas"
        ></canvas>
      </view> -->

      <!-- #ifndef H5 -->
      <view class="btns">
        <view class="btn">
          <text class="icon">
            <text class="iconfont icon-resonserate"></text>
          </text>
          <text class="title">{{ $t("shareholder.share") }}</text>
          <button open-type="share"></button>
        </view>
        <view class="btn" @click="saveImage">
          <text class="icon">
            <text class="iconfont icon-download"></text>
          </text>
          <text class="title">{{ $t("my.save") }}</text>
        </view>
      </view>
      <!-- #endif -->
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      context: "",
      config: {
        background: "",
        data: "",
      },
    };
  },
  methods: {
    // 获取首页数据
    async getQrcode() {
      const res = await this.$allrequest.shareholder.getQrcode();
      if (res.code == 0) {
        this.config = res.data;
      }
    },
    // 阅览图片
    previewImage() {
      uni.previewImage({
        current: 0,
        urls: [this.config.data],
      });
    },
    // 点击保存图片
    saveImage() {
      var _self = this;
      //获取相册授权
      uni.getSetting({
        success(res) {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success() {
                //这里是用户同意授权后的回调
                _self.saveImgToLocal();
              },
              fail() {
                //这里是用户拒绝授权后的回调
                _self.openSettingBtnHidden = false;
              },
            });
          } else {
            //用户已经授权过了
            _self.saveImgToLocal();
          }
        },
      });
    },
    //下载并保存图片
    saveImgToLocal(e) {
      var _self = this;
      uni.showModal({
        title: _self.$t("order.prompt"),
        content: _self.$t("common.shareContent"),
        success: function (res) {
          if (res.confirm) {
            uni.downloadFile({
              url: _self.config.data, //图片地址
              success: (res) => {
                if (res.statusCode === 200) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: function () {
                      uni.showToast({
                        title: _self.$t("common.saveSuc"),
                        icon: "none",
                      });
                    },
                    fail: function () {
                      uni.showToast({
                        title: _self.$t("common.saveFail"),
                        icon: "none",
                      });
                    },
                  });
                }
              },
            });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
  onShow() {
    this.getQrcode();
  },
  onReady() {
    var context = uni.createCanvasContext("userCanvas");
    context.setFillStyle("pink");
    context.fillRect(0, 0, 100, 100);
    context.draw();
  },
  onShareAppMessage(res) {
    const storeId = uni.getStorageSync("store_id");
    let userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      return {
        title: this.stores.name,
        path:
          "/pages/home/home?user_id=" + userInfo.id + `&store_id=${storeId}`,
      };
    }
  },
};
</script>

<style lang="scss" scoped>
.codePreview {
  color: #fff;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  background-position: 100% 100%;
  padding-top: 142rpx;
  .userBox {
    display: flex;
    flex-direction: column;
    width: 642rpx;
    height: 698rpx;
    border-radius: 48rpx;
    overflow: hidden;
    margin: 0 auto;
    image {
      width: 100%;
      height: 100%;
    }
    .userPic {
      width: 132rpx;
      height: 132rpx;
      border-radius: 50%;
      background-color: #fff;
    }
    .name {
      font-size: 46rpx;
      margin-top: 54rpx;
    }
    .tip {
      margin-top: 12rpx;
      font-size: 28rpx;
      opacity: 0.6;
      padding-bottom: 50rpx;
      border-bottom: 1px solid #fff;
    }
    .codePic {
      padding-top: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .tips {
        display: flex;
        flex-direction: column;
        font-size: 28rpx;
        opacity: 0.6;
      }
      .pic {
        width: 160rpx;
        height: 160rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 14rpx;
        text {
          display: block;
          width: 100%;
          height: 100%;
          background-color: #e4e4e4;
        }
      }
    }
  }
  .btns {
    display: flex;
    justify-content: space-between;
    padding: 0 106rpx;
    margin-top: 66rpx;
    .btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .icon {
        width: 130rpx;
        height: 130rpx;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          font-size: 64rpx;
        }
      }
      .title {
        font-size: 26rpx;
        margin-top: 10rpx;
      }
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
  .canvas {
    border-radius: 48rpx;
    background-color: pink;
  }
}
</style>
